<template>
    <li class="bc-tree-item">
        <div class="bc-tree-item__content" tabindex="0">
            <i class="bc-icon icon-bc-unfold" @click="handleExpand" :class="{'is-expand': data.expand}"></i>
            <bc-checkbox v-if="showCheckbox" v-model="data.checked"
                @change="handleCheck" :disabled="data.disabled"
                :indeterminate="data.indeterminate"></bc-checkbox>
            <span class="bc-tree-item__label" @click="handleClick">{{data.label}}</span>
        </div>
        <bc-collapse-transition>
            <ul class="bc-tree-item__children" 
                v-if="data.children&&data.children.length>0" 
                v-show="data.expand">
                <bc-tree-item v-for="(node, index) in data.children" 
                    :key="index" :data="node"
                    :showCheckbox="showCheckbox"
                ></bc-tree-item>
            </ul>
        </bc-collapse-transition>
    </li>
</template>

<script>
import Emitter from './emitter.js'
import BcCollapseTransition from '@/components/base/collapse-transition.js';
export default {
    name: 'BcTreeItem',
    components: { BcCollapseTransition },
    mixins: [ Emitter ],
    props: {
        data: {
            type: Object,
            default: () => {}
        },
        showCheckbox: Boolean
    },
    methods: {
        handleCheck(val) {
            if (this.data.disabled) return;
            const changes = {
                checked: val && !this.data.indeterminate,
                nodeKey: this.data.nodeKey
            }
            // 不管该节点是子节点的第多少层，都把事件提交给根节点处理
            this.dispatch('BcTree', 'on-check', changes);
        },
        handleClick() {
            this.handleExpand();
            this.dispatch('BcTree', 'node-click', this.data);
        },
        handleExpand() {
            const item = this.data;
            if (item.children) {
                if (item.expand) {
                    item.expand = !item.expand
                } else {
                    this.$set(item, 'expand', true)
                }
                this.dispatch('BcTree', 'toggle-expand', this.data);
            }
        }
    }
}
</script>

<style scoped>
.bc-tree-item {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
    transition: all .3s;
    color: #606266;
}
.bc-tree-item>.bc-tree-item__children {
    padding-left: 20px;
}
.bc-tree-item__content {
    display: flex;
    align-items: center;
    height: 26px;
    cursor: pointer;
}
.bc-tree-item__content .bc-icon {
    font-size: 14px;
    margin-right: 6px;
    transition: transform 0.3s ease 0s;
}
.bc-tree-item__content .bc-icon.is-expand {
    transform: rotateZ(-90deg)
}
.bc-tree-item__content>.bc-checkbox {
    margin-right: 8px;
}
.bc-tree-node__label {
    font-size: 14px;
}
.bc-tree-item__content:hover {
   background-color: #d5e8fc;
}
.bc-tree-item__content:focus .bc-tree-item__label {
   background-color: #d5e8fc;
}
.bc-tree-item__content:focus {
   outline: none;
}
.collapse-transition {
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
</style>